<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市图书馆</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.0/css/all.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #4cc9f0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: var(--dark);
            overflow-x: hidden;
            padding-bottom: 70px;
        }

        .navbar {
            background: rgba(67, 97, 238, 0.9);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 15px 0;
        }

        .hero-section {
            height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?ixlib=rb-4.0.3&auto=format&fit=crop&w=1953&q=80');
            background-size: cover;
            background-position: center;
            color: white;
            border-radius: 0 0 30px 30px;
        }

        .hero-content {
            z-index: 2;
            padding: 2rem;
            background: rgba(67, 97, 238, 0.7);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            max-width: 90%;
        }

        .section-title {
            position: relative;
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
        }

        .section-title h2 {
            font-size: 1.8rem;
            display: inline-block;
            padding: 10px 20px;
            background: white;
            border-radius: 50px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 1;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 15px;
            background: var(--success);
            bottom: 5px;
            left: 0;
            z-index: -1;
            border-radius: 50px;
        }

        .service-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            height: 100%;
            border: 2px solid transparent;
            margin-bottom: 20px;
        }

        .service-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .service-img {
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
        }

        .service-content {
            padding: 20px;
        }

        .book-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .book-img {
            height: 200px;
            background-size: cover;
            background-position: center;
        }

        .book-content {
            padding: 15px;
        }

        .stats-section {
            background: rgba(255, 255, 255, 0.8);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .stat-item {
            text-align: center;
            padding: 15px;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(45deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 5px;
        }

        .form-control {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            color: var(--dark);
            padding: 12px 15px;
            border-radius: 12px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            background: white;
            border-color: var(--primary);
            box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
            color: var(--dark);
        }

        footer {
            background: rgba(67, 97, 238, 0.9);
            padding: 20px 0;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
        }

        .btn-custom {
            background: linear-gradient(45deg, var(--primary), var(--accent));
            border: none;
            padding: 10px 20px;
            border-radius: 30px;
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
        }

        .btn-custom:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 10px 25px rgba(67, 97, 238, 0.6);
        }

        .floating-element {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 15s infinite ease-in-out;
            z-index: 0;
        }

        @keyframes float {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(10px, 10px) rotate(90deg); }
            50% { transform: translate(0, 20px) rotate(180deg); }
            75% { transform: translate(-10px, 10px) rotate(270deg); }
            100% { transform: translate(0, 0) rotate(360deg); }
        }

        .floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
        }

        .bottom-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: white;
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }

        .nav-item {
            text-align: center;
            padding: 10px 0;
            color: var(--dark);
            text-decoration: none;
            display: block;
        }

        .nav-item.active {
            color: var(--primary);
            font-weight: bold;
        }

        .nav-item i {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        .search-bar {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 30px;
            padding: 8px 15px;
            margin: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .category-chip {
            display: inline-block;
            background: rgba(67, 97, 238, 0.1);
            color: var(--primary);
            padding: 5px 15px;
            border-radius: 30px;
            margin: 5px;
            font-size: 0.9rem;
            cursor: pointer;
        }

        .category-chip.active {
            background: var(--primary);
            color: white;
        }

        .event-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            border-left: 5px solid var(--primary);
        }

        .event-date {
            background: var(--primary);
            color: white;
            padding: 10px;
            text-align: center;
            font-weight: bold;
        }

        .event-content {
            padding: 15px;
        }

        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 1.8rem;
            }
            
            .hero-content p {
                font-size: 1rem;
            }
            
            .section-padding {
                padding: 40px 0;
            }
            
            .container {
                padding: 0 10px;
            }
        }
    </style>
</head>
<body>
    <!-- 浮动装饰元素 -->
    <div class="floating-elements" id="floatingElements"></div>

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <h3 class="mb-0">城市<span style="color: #ffd166;">图书馆</span></h3>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#home">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#books">图书</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#events">活动</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">联系</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section" id="home">
        <div class="container">
            <div class="hero-content">
                <h1 class="display-5 fw-bold">发现知识的海洋</h1>
                <p class="lead">城市图书馆为您提供丰富的图书资源和文化活动，营造浓郁书香氛围</p>
                <button class="btn btn-custom mt-3">探索更多</button>
            </div>
        </div>
    </section>

    <!-- 搜索栏 -->
    <div class="search-bar">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="搜索图书、作者、主题...">
            <button class="btn btn-custom" type="button">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </div>

    <!-- 分类导航 -->
    <div class="container mb-4">
        <div class="text-center">
            <span class="category-chip active">全部</span>
            <span class="category-chip">文学</span>
            <span class="category-chip">科技</span>
            <span class="category-chip">历史</span>
            <span class="category-chip">艺术</span>
            <span class="category-chip">儿童</span>
        </div>
    </div>

    <!-- 热门图书 -->
    <section class="section-padding" id="books">
        <div class="container">
            <div class="section-title">
                <h2>热门图书</h2>
            </div>
            <div class="row">
                <div class="col-6">
                    <div class="book-card">
                        <div class="book-img" style="background: linear-gradient(45deg, #ff9a9e, #fad0c4);"></div>
                        <div class="book-content">
                            <h5>百年孤独</h5>
                            <p class="text-muted">加西亚·马尔克斯</p>
                            <div class="d-flex justify-content-between">
                                <span class="text-warning"><i class="fas fa-star"></i> 4.8</span>
                                <span class="text-success">可借阅</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="book-card">
                        <div class="book-img" style="background: linear-gradient(45deg, #a1c4fd, #c2e9fb);"></div>
                        <div class="book-content">
                            <h5>人类简史</h5>
                            <p class="text-muted">尤瓦尔·赫拉利</p>
                            <div class="d-flex justify-content-between">
                                <span class="text-warning"><i class="fas fa-star"></i> 4.7</span>
                                <span class="text-success">可借阅</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="book-card">
                        <div class="book-img" style="background: linear-gradient(45deg, #d4fc79, #96e6a1);"></div>
                        <div class="book-content">
                            <h5>活着</h5>
                            <p class="text-muted">余华</p>
                            <div class="d-flex justify-content-between">
                                <span class="text-warning"><i class="fas fa-star"></i> 4.9</span>
                                <span class="text-danger">已借出</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="book-card">
                        <div class="book-img" style="background: linear-gradient(45deg, #ffecd2, #fcb69f);"></div>
                        <div class="book-content">
                            <h5>三体</h5>
                            <p class="text-muted">刘慈欣</p>
                            <div class="d-flex justify-content-between">
                                <span class="text-warning"><i class="fas fa-star"></i> 4.6</span>
                                <span class="text-success">可借阅</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 图书馆服务 -->
    <section class="section-padding bg-white" id="services">
        <div class="container">
            <div class="section-title">
                <h2>我们的服务</h2>
            </div>
            <div class="row g-3">
                <div class="col-6">
                    <div class="service-card">
                        <div class="service-img" style="background: linear-gradient(45deg, #ff9a9e, #fad0c4);">
                            <i class="fas fa-book"></i>
                        </div>
                        <div class="service-content">
                            <h5>图书借阅</h5>
                            <p>超过50万册图书可供借阅，涵盖各个领域</p>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="service-card">
                        <div class="service-img" style="background: linear-gradient(45deg, #a1c4fd, #c2e9fb);">
                            <i class="fas fa-laptop"></i>
                        </div>
                        <div class="service-content">
                            <h5>数字资源</h5>
                            <p>电子书、数据库、在线期刊等数字资源</p>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="service-card">
                        <div class="service-img" style="background: linear-gradient(45deg, #d4fc79, #96e6a1);">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="service-content">
                            <h5>读者活动</h5>
                            <p>定期举办读书会、讲座、展览等活动</p>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="service-card">
                        <div class="service-img" style="background: linear-gradient(45deg, #ffecd2, #fcb69f);">
                            <i class="fas fa-child"></i>
                        </div>
                        <div class="service-content">
                            <h5>儿童专区</h5>
                            <p>专为儿童设计的阅读空间和活动</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 活动日历 -->
    <section class="section-padding" id="events">
        <div class="container">
            <div class="section-title">
                <h2>近期活动</h2>
            </div>
            <div class="event-card">
                <div class="row g-0">
                    <div class="col-3">
                        <div class="event-date">
                            <div>6月</div>
                            <div style="font-size: 1.5rem; font-weight: bold;">15</div>
                            <div>周六</div>
                        </div>
                    </div>
                    <div class="col-9">
                        <div class="event-content">
                            <h5>作家见面会：当代文学创作分享</h5>
                            <p class="text-muted">著名作家将分享创作心得，并与读者互动交流</p>
                            <div class="d-flex justify-content-between">
                                <span><i class="fas fa-clock me-1"></i> 14:00-16:00</span>
                                <span><i class="fas fa-map-marker-alt me-1"></i> 三楼报告厅</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="event-card">
                <div class="row g-0">
                    <div class="col-3">
                        <div class="event-date">
                            <div>6月</div>
                            <div style="font-size: 1.5rem; font-weight: bold;">18</div>
                            <div>周二</div>
                        </div>
                    </div>
                    <div class="col-9">
                        <div class="event-content">
                            <h5>儿童绘本阅读活动</h5>
                            <p class="text-muted">专为3-6岁儿童设计的互动绘本阅读活动</p>
                            <div class="d-flex justify-content-between">
                                <span><i class="fas fa-clock me-1"></i> 10:00-11:30</span>
                                <span><i class="fas fa-map-marker-alt me-1"></i> 儿童阅览室</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="event-card">
                <div class="row g-0">
                    <div class="col-3">
                        <div class="event-date">
                            <div>6月</div>
                            <div style="font-size: 1.5rem; font-weight: bold;">22</div>
                            <div>周六</div>
                        </div>
                    </div>
                    <div class="col-9">
                        <div class="event-content">
                            <h5>数字资源使用培训</h5>
                            <p class="text-muted">教授如何使用图书馆的电子资源和数据库</p>
                            <div class="d-flex justify-content-between">
                                <span><i class="fas fa-clock me-1"></i> 15:00-17:00</span>
                                <span><i class="fas fa-map-marker-alt me-1"></i> 二楼培训室</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 统计数据区域 -->
    <section class="stats-section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-6 col-md-3">
                    <div class="stat-item">
                        <div class="stat-number" data-count="500000">0</div>
                        <h6>藏书量</h6>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-item">
                        <div class="stat-number" data-count="1200000">0</div>
                        <h6>年借阅量</h6>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-item">
                        <div class="stat-number" data-count="200">0</div>
                        <h6>座位数</h6>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-item">
                        <div class="stat-number" data-count="300">0</div>
                        <h6>年活动</h6>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部导航 -->
    <nav class="bottom-nav d-lg-none">
        <div class="container">
            <div class="row text-center">
                <div class="col">
                    <a href="#home" class="nav-item active">
                        <i class="fas fa-home"></i>
                        <span>首页</span>
                    </a>
                </div>
                <div class="col">
                    <a href="#books" class="nav-item">
                        <i class="fas fa-book"></i>
                        <span>图书</span>
                    </a>
                </div>
                <div class="col">
                    <a href="#events" class="nav-item">
                        <i class="fas fa-calendar-alt"></i>
                        <span>活动</span>
                    </a>
                </div>
                <div class="col">
                    <a href="#services" class="nav-item">
                        <i class="fas fa-concierge-bell"></i>
                        <span>服务</span>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <p>&copy; 2023 城市图书馆. 打造书香城市，传播知识文化。</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 创建浮动装饰元素
        function createFloatingElements() {
            const container = document.getElementById('floatingElements');
            const colors = [
                'var(--primary)', 
                'var(--secondary)', 
                'var(--accent)', 
                '#a663cc', 
                '#ff85a2'
            ];
            
            for (let i = 0; i < 15; i++) {
                const element = document.createElement('div');
                element.classList.add('floating-element');
                
                // 随机大小
                const size = Math.random() * 40 + 10;
                element.style.width = `${size}px`;
                element.style.height = `${size}px`;
                
                // 随机位置
                element.style.left = `${Math.random() * 100}%`;
                element.style.top = `${Math.random() * 100}%`;
                
                // 随机颜色
                const color = colors[Math.floor(Math.random() * colors.length)];
                // 对于CSS变量，我们需要获取实际计算后的颜色값
                if (color.startsWith('var(')) {
                    const varName = color.match(/var\((.*)\)/)[1];
                    const computedColor = getComputedStyle(document.documentElement)
                        .getPropertyValue(varName.trim());
                    element.style.background = computedColor + '30';
                } else {
                    element.style.background = color + '30';
                }
                
                // 随机动画延迟
                element.style.animationDelay = `${Math.random() * 5}s`;
                
                container.appendChild(element);
            }
        }

        // 初始化粒子效果
        createFloatingElements();

        // 数字动画效果
        function animateValue(obj, start, end, duration) {
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                obj.innerHTML = Math.floor(progress * (end - start) + start);
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }

        // 滚动到视图时触发动画
        const observerOptions = {
            root: null,
            rootMargin: "0px",
            threshold: 0.5
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const countElements = entry.target.querySelectorAll('.stat-number');
                    countElements.forEach(el => {
                        const count = parseInt(el.getAttribute('data-count'));
                        animateValue(el, 0, count, 2000);
                    });
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        // 监听统计区域
        const statsSection = document.querySelector('.stats-section');
        if (statsSection) {
            observer.observe(statsSection);
        }

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.style.padding = '10px 0';
                navbar.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)';
            } else {
                navbar.style.padding = '15px 0';
                navbar.style.boxShadow = 'none';
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    window.scrollTo({
                        top: target.offsetTop - 70,
                        behavior: 'smooth'
                    });
                }
            });
        });

        // 底部导航激活状态切换
        $('.nav-item').on('click', function() {
            $('.nav-item').removeClass('active');
            $(this).addClass('active');
        });

        // 分类标签切换
        $('.category-chip').on('click', function() {
            $('.category-chip').removeClass('active');
            $(this).addClass('active');
        });

        // 模拟图书搜索功能
        $('.btn-custom').on('click', function() {
            const searchTerm = $('.form-control').val();
            if (searchTerm) {
                alert(`搜索 "${searchTerm}" 的结果将在这里显示`);
            } else {
                alert('请输入搜索关键词');
            }
        });
    </script>
</body>
</html>